document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('header');
    let lastScrollTop = 0;
    const scrollThreshold = 100; // Scroll threshold to change navbar style

    window.addEventListener('scroll', function() {
        const scrollTop = window.scrollY; // Use scrollY instead of pageYOffset

        // Add scroll style
        if (scrollTop > scrollThreshold) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }

        // Hide/Show navbar
        if (scrollTop > lastScrollTop && scrollTop > scrollThreshold) {
            // Scrolling down
            header.classList.add('nav-hidden');
        } else {
            // Scrolling up
            header.classList.remove('nav-hidden');
        }

        lastScrollTop = scrollTop;
    });
}); 